<template>
  <view class="nav-bar" :style="{ background: background }">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="nav-bar-content">
      <!-- 返回按钮 -->
      <view v-if="showBack" class="nav-back" @click="goBack">
        <tn-icon name="left" size="30"></tn-icon>
      </view>

      <!-- 标题 -->
      <view class="nav-title" :style="{ opacity: titleOpacity }">
        <view v-if="title" class="title-text">{{ title }}</view>
        <slot v-else name="title"></slot>
      </view>

      <!-- 右侧操作区域 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
  <!-- 占位元素，使内容不被遮挡 -->
  <view class="nav-bar-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: false
  },
  // 导航栏背景色
  background: {
    type: String,
    default: '#f8f9fc' // 默认使用浅彩像素风的淡云白背景
  },
  // 渐变透明效果
  fadeTitle: {
    type: Boolean,
    default: false
  },
  // 新增：页面滚动位置
  scrollTop: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['back']);

// 状态栏高度
const statusBarHeight = ref(0);
// 导航栏内容高度
const navContentHeight = ref(44);
// 标题透明度
const titleOpacity = ref(props.fadeTitle ? 0 : 1);

// 计算导航栏总高度
const navBarHeight = computed(() => {
  return statusBarHeight.value + navContentHeight.value;
});

// 监听滚动位置变化，控制标题透明度
watch(
  () => props.scrollTop,
  (newVal) => {
    if (props.fadeTitle) {
      // 当滚动到100px时标题完全显示
      if (newVal < 100) {
        titleOpacity.value = newVal / 100;
      } else {
        titleOpacity.value = 1;
      }
    }
  }
);

onMounted(() => {
  // 获取状态栏高度 - 使用新API替代过时的getSystemInfoSync
  const windowInfo = uni.getWindowInfo();
  statusBarHeight.value = windowInfo.statusBarHeight;
});

// 返回上一页
const goBack = () => {
  emit('back');
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss" scoped>
// 浅彩像素风色彩体系
$pixel-yellow: #fff3c2; // 浅鹅黄（信息背景）
$pixel-white: #f8f9fc; // 淡云白（全局背景）
$pixel-blue: #a3d2e6; // 雾湖蓝（功能主色）
$pixel-gray: #d4cdc3; // 砂岩灰（分割线）
$pixel-cream: #ffeedb; // 奶油霜（高光点缀）
$pixel-text-primary: #5c7c9f; // 雾蓝（一级标题）
$pixel-text-content: #6d6d6d; // 暖灰（正文）
$pixel-text-helper: #b3b9c2; // 银灰（辅助文字）

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  
  /* 浅彩像素风背景样式 */
  background-color: $pixel-white;
  
  /* 底部阴影增强层次感 */
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
  
  /* 柔光滤镜效果 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  
  /* 边缘虚化处理 */
  border-bottom: 1rpx solid rgba($pixel-gray, 0.3);

  .nav-bar-content {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;

    .nav-back {
      position: absolute;
      left: 24rpx;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 10;
      
      /* 返回按钮样式优化 */
      tn-icon {
        color: $pixel-text-primary;
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.9);
          color: $pixel-blue;
        }
      }
    }

    .nav-title {
      font-size: 32rpx;
      font-weight: 500;
      max-width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: opacity 0.25s;
      color: $pixel-text-primary;

      .title-text {
        font-family: 'PingFang SC', sans-serif;
        font-weight: 600;
        color: $pixel-text-primary;
      }
    }

    .nav-right {
      position: absolute;
      right: 24rpx;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
</style>
